<template>
  <div class="z-header">
    <div class="left">
        <img v-show="showLeft" src="~@/assets/arraw_left.png" alt="" @click="goToHome">
    </div>
    <div class="title">
        <p>{{ title }}</p>
    </div>
    <div class="right"></div>
  </div>
</template>
    
<script lang="ts" setup>

import { ref, inject } from 'vue';
import { useRouter } from 'vue-router';

const {title, showLeft} = inject('nav');

const router = useRouter();

const goToHome = () => {
  router.push({path: '/'});
}


</script>
    
<style lang="less" scoped>
.z-header {
  width: 100%;
  height: 50px;
  background-color: #12d2ec;
  display: flex;
  color: #fff;
  
  div {
    width: 0;
  }

  .left {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        width: 70%;
        height: 70%;
    }
  }
  .title {
    flex-grow: 8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 18px;
  }
  .right {
    flex-grow: 1;
  }
  
}
</style>